<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<div>
				<!-- 属性key是被vue给征用的，并不反应在真实dom上 -->
				<li v-for="(person,index) in persons" :key="person.id">
					{{person.name}} - {{ person.age }}
					<!--为了看到key值的不正确滥用所导致的问题，我们添加一个input框-->
					<input type="text" />
				</li>
			</div>
			<div>
				<button @click="addPersonOnHead">在数组头部添加一个</button>
				<button @click="addPersonOnRear">在数组尾部添加一个</button>
			</div>
		</div>

		<script type="text/javascript">
			const vm = new Vue({
				el: "#root",
				data: {
					//数组
					persons: [{
							id: '001',
							name: '张三',
							age: 18
						},
						{
							id: '002',
							name: '李四',
							age: 19
						},
						{
							id: '003',
							name: '王五',
							age: 20
						}
					]
				},
				methods: {
					addPersonOnHead() {
						// 往数组头部添加元素（起始位置）
						this.persons.unshift({
							id: '004',
							name: '老刘',
							age: 40
						})
					},
					addPersonOnRear() {
						// 往数组尾部添加元素（末尾）
						this.persons.push({
							id: '888',
							name: '老王',
							age: 66
						})
					}
				}
			})
		</script>
	</body>
</html>